إضافة زر إجراء عائم

تجربة ميزة "الكتابة"

‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم المُقترَحة لنظام التشغيل Android. تعرَّف على كيفية إضافة مكوّنات في ميزة "الإنشاء".

زر الإجراء العائم →

زر الإجراء العائم هو زر دائري يؤدي إلى تنفيذ الإجراء الأساسي في واجهة مستخدم تطبيقك. توضّح لك هذه الصفحة كيفية إضافة التطبيق المصغّر في الشريط الجانبي إلى تنسيقك، وتخصيص بعض مظاهره، والاستجابة لعمليات النقر على الأزرار.

للاطّلاع على مزيد من المعلومات حول كيفية تصميم زرّ إجراء عائم في تطبيقك وفقًا لإرشادات التصميم المتعدد الأبعاد، يمكنك أيضًا الاطّلاع على مقالة الأزرار: زرّ الإجراء العائم.

الشكل 1: زر إجراء عائم

إضافة زر الإجراء الرئيسي إلى التنسيق

يوضّح الرمز البرمجي التالي كيفية ظهورFloatingActionButton في ملف التنسيق:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

يتم تلقائيًا تلوين التطبيق المصغّر للإجراءات السريعة باستخدام سمة colorAccent، ويمكنك تخصيصه باستخدام لوحة ألوان المظهر.

يمكنك ضبط سمات التطبيق المصغّر للإجراءات الفورية الأخرى باستخدام سمات XML أو الطرق المقابلة، مثل ما يلي:

• حجم التطبيق المصغّر في شريط التطبيقات المفضّلة، باستخدام السمة app:fabSize أو الطريقة setSize()
• لون التموج في زر التطبيقات المصغّرة في شريط التطبيقات، باستخدام السمة app:rippleColor أو الطريقة setRippleColor()
• رمز التطبيق المصغّر في شريط التطبيقات، باستخدام السمة android:src أو الطريقة setImageDrawable()

الاستجابة للضغط على الأزرار

يمكنك بعد ذلك تطبيق View.OnClickListener للتعامل مع عمليات التمرير سريعًا على رمز التطبيقات المصغّرة القابلة للاستخدام. على سبيل المثال، يعرض الرمز البرمجي التالي Snackbar عندما ينقر المستخدم على التطبيق المصغّر المتوفّر في أعلى الشاشة:

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

لمزيد من المعلومات حول إمكانات التطبيق المصغّر في شريط التطبيقات، يُرجى الاطّلاع على مرجع واجهة برمجة التطبيقات لFloatingActionButton.